<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .blog{margin: 10px auto;}
        textarea{margin: 10px;}
        button{margin: 10px;}
        .blog li{
            width: 1000px;padding: 10px;border: 2px solid red;list-style: none;
        }
    </style>
</head>
<body>
    <div class="blog">
        <textarea name="" id=""></textarea>
        <br>
        <button>发布按钮</button>
        <ul class="list"></ul>
    </div>
    <script>
        // 实现微博发布 
        // 张三负责发布信息
        // 李四负责删除
        function zhangsan(){
            var textarea=document.querySelector('textarea');//发布内容
            var button=document.querySelector('button'); //发布按钮
            var list=document.querySelector('.list');//显示列表

            button.onclick=function(){
                if(textarea.value!==""){
                    var cli=document.createElement('li');
                    cli.innerHTML=textarea.value;
                    list.insertBefore(cli,list.children[0]);
                    textarea.value="";
                }else{
                    alert("输入内容")
                }
            }
        }
        zhangsan()

        function lisi(){
            // alert(document.querySelectorAll('li').length)//0
            var list=document.querySelector('.list');
            document.onclick=function(e){
                e=e||event;
                if(e.target.nodeName=="LI"){
                    e.target.remove()
                }
            }
        }
        lisi()
    </script>
</body>
</html>